<template>
  <!--项目经营- 项目人力成本列表 4-7 -->
  <div class="table-wrap">
    <div class="table-top">
      <a-form :form="form">
        <a-form-item label="总人力成本" :label-col="{ span:9 }" :wrapper-col="{ span: 15 }">
          <a-input placeholder="请输入总人力成本" />
        </a-form-item>
      </a-form>
    </div>
    <div class="table">
      <a-table :columns="columns" :dataSource="tableData" bordered>
        <span slot="type" slot-scope="text">
          <a-button type="primary" class="buttonColorGreen" v-if="text==='正常'">
            正常</a-button>
          <a-button type="primary" class="buttonColorWarning" v-if="text==='即将超出'">
            即将超出</a-button>
          <a-button type="primary" class="buttonColorError" v-if="text==='超出'">
            超出</a-button>
        </span>
        <span slot="person" slot-scope="text" class="green">
          {{text}}
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
const columns = [{   //表格表头
  title: '序号',
  dataIndex: 'number',
  scopedSlots: { customRender: 'number' },
},
{
  title: '阶段',
  className: 'objectName',
  dataIndex: 'objectName',
},
{
  title: '工作内容',
  dataIndex: 'checkinTime',
},
{
  title: '预算',
  dataIndex: 'objectNum',
},
{
  title: '比例',
  dataIndex: 'objectType',
},
{
  title: '实际支出',
  dataIndex: 'customUnit',
},
{
  title: '支出/预算比例',
  dataIndex: 'type',
  scopedSlots: { customRender: 'type' },
},
{
  title: '相关人员',
  dataIndex: 'person',
  scopedSlots: { customRender: 'person' },
},

];

const tableData = [//表格数据
  {
    number: '1',
    objectName: '南昌县A项目',
    objectNum: '300,000.00',
    checkinTime: 'New York No',
    objectType: '2%',
    customUnit: '10000',
    type: '正常',
    person: "张三，里斯"
  },
  {
    number: '2',
    objectName: '南昌县A项目',
    objectNum: '1,256,000.00',
    checkinTime: 'London No',
    objectType: '2%',
    customUnit: '10000',
    type: '即将超出',
    person: "张三，里斯"
  },
  {
    number: '3',
    objectName: '南昌县A项目',
    objectNum: '120,000.00',
    checkinTime: 'Sidney No',
    objectType: '2%',
    customUnit: '10000',
    type: '超出',
    person: "张三，里斯"
  }
];

export default {
  data() {
    return {
      tableData,
      columns,
      search: '',
      form: this.$form.createForm(this)
    }
  },
  methods: {
    onSearch() {   //搜索

    },
    onDelete(key) {  //删除
      const dataSource = [...this.dataSource]
      this.dataSource = dataSource.filter(item => item.key !== key)
    },
    reset() {  //重置
      this.search = ""
    }
  }
}
</script>

<style>
.table-top {
  margin-bottom: -20px;
}

.buttonColorWarning {
  background-color: #ffad0b;
  border-color: #ffad0b;
}

.buttonColorWarning:hover,
.buttonColorWarning:focus {
  background-color: #ffad0b;
  border-color: #ffad0b;
}

.buttonColorWarning:active,
.buttonColorWarning.active {
  background-color: #ffad0b;
  border-color: #ffad0b;
}

.buttonColorError {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.buttonColorError:hover,
.buttonColorError:focus {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.buttonColorError:active,
.buttonColorError.active {
  background-color: #f56c6c;
  border-color: #f56c6c;
}
.green {
  color: #1abc9c;
}
</style>

